import Image from 'next/image'
import Link from 'next/link'
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  NavbarMenuToggle,
  NavbarMenu,
  NavbarMenuItem,
  Button,
  DropdownItem,
  DropdownTrigger,
  Dropdown,
  DropdownMenu,
} from '@nextui-org/react'
import { useState } from 'react'
import classNames from 'classnames'

import iconArrowDown from '@/assets/icons/ic_arrowdown.png'
import iconArrowUp from '@/assets/icons/ic_arrowup.png'

export default function Header() {
  const menuData = [
    {
      label: 'Instagram Downloader',
      children: [
        {
          label: 'Instagram Video Download',
          link: '/download-instagram-videos/',
        },
        {
          label: 'Instagram Story Download',
          link: '/instagram-story-download/',
        },
        {
          label: 'Instagram Photo Download',
          link: '/instagram-photo-download/',
        },
        {
          label: 'Instagram Reels Download',
          link: '/download-reels-instagram/',
        },
      ],
    },
    {
      label: 'Instagram Viewer',
      children: [
        { label: 'Instagram Story Viewer', link: '/instagram-story-viewer/' },
        {
          label: 'Instagram Profile Viewer',
          link: '/instagram-profile-viewer/',
        },
      ],
    },
    {
      label: 'Instagram Generator',
      children: [
        {
          label: 'Instagram Hashtag Generator',
          link: '/instagram-hashtag-generator/',
        },
        {
          label: 'Instagram Caption Generator',
          link: '/instagram-caption-generator/',
        },
        { label: 'Instagram Bio Generator', link: '/instagram-bio-generator/' },
        {
          label: 'Instagram Username Generator',
          link: '/instagram-username-generator/',
        },
      ],
    },
  ]

  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [openIndex, setOpenIndex] = useState(0)
  return (
    <Navbar
      className="text-black nav-center max-sm:border-0 max-sm:justify-center max-sm:shadow"
      isBordered
      shouldHideOnScroll
      onMenuOpenChange={setIsMenuOpen}
    >
      <div
        className="flex items-center gap-[8px] mr-[30px] cursor-pointer max-sm:mr-0"
        onClick={() => (location.href = 'https://www.sssgram.com/')}
      >
        <Image
          src={require('@/assets/logo.png').default}
          alt="logo"
          width={36}
          height={36}
        ></Image>
        <span className="text-logoTxt text-lg font-black">SSSGram</span>
      </div>
      <NavbarContent className="flex flex-row items-center max-sm:hidden">
        {menuData.map((item) => (
          <Dropdown key={item.label}>
            <NavbarItem
              className="p-[15px] cursor-pointer hover:text-[#8000FF]"
              key={item.label}
            >
              <DropdownTrigger aria-label="DropdownTrigger">
                <Button
                  disableRipple
                  className="p-0 bg-transparent data-[hover=true]:bg-transparent"
                  // endContent={icons.chevron}
                  endContent={
                    <Image
                      src={iconArrowDown}
                      alt="icon arrowup"
                      width={16}
                      height={16}
                    />
                  }
                  radius="sm"
                  variant="light"
                >
                  {item.label}
                </Button>
              </DropdownTrigger>
            </NavbarItem>
            <DropdownMenu
              aria-label="DropdownMenu"
              className="text-center"
              itemClasses={{
                base: 'gap-4',
              }}
            >
              {item.children.map((child) => (
                <DropdownItem
                  aria-label="DropdownItem"
                  key={child.label}
                  textValue={child.label}
                >
                  <Link href={child.link}>
                    <span className="text-sm text-secondary font-semibold">
                      {child.label}
                    </span>
                  </Link>
                </DropdownItem>
              ))}
            </DropdownMenu>
          </Dropdown>
        ))}
      </NavbarContent>
      <NavbarContent
        className="absolute left-[20px] top-0 sm:hidden"
        justify="start"
      >
        <NavbarMenuToggle
          aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
        />
      </NavbarContent>
      <NavbarMenu>
        {menuData.map((item, index) => (
          <NavbarMenuItem
            className={classNames('p-3', {
              ['border-b']: index !== menuData.length - 1,
            })}
            key={`${item}-${index}`}
          >
            <div
              className="flex flex-row justify-between"
              onClick={() => setOpenIndex(index)}
            >
              {item.label}
              <Image
                src={openIndex === index ? iconArrowUp : iconArrowDown}
                alt="icon arrowup"
                width={16}
                height={16}
                style={{ height: '16px' }}
              />
            </div>
            <div
              className={`grid ${
                openIndex === index ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
              }`}
              style={{ transition: 'all 200ms' }}
            >
              <div className="overflow-hidden">
                {item.children.map((child) => (
                  <Link href={child.link} key={child.label}>
                    <div className="p-[10px] text-secondary">{child.label}</div>
                  </Link>
                ))}
              </div>
            </div>
          </NavbarMenuItem>
        ))}
      </NavbarMenu>
    </Navbar>
  )
}
